<template>
	<view class="body" >
		<view class="header">
			<!-- 搜索框开始 -->
			<view class="search" >
				<u-search v-model="searchKws" height="70" placeholder="输入店铺名或店铺地区搜索" action-text="取消" @change="change" @custom="custom" ></u-search>
			</view>
			
			<!-- 搜索框结束 -->
			<!-- <view class="navbar">
				<view :style="{color: filterIndex === 0 ? '#fa4367' : ''}" class="nav-item" :class="{current: filterIndex === 0}" @click="tabClick(0)">
					综合排序
				</view>
				<view :style="{color: filterIndex === 1 ? '#fa436a' : ''}" class="nav-item" :class="{current: filterIndex === 1}" @click="tabClick(1)">
					
					<text>销量</text>
					<view class="p-box">
						<text :style="{color: saleOrder === 1 && filterIndex === 1 ? '#fa436a' : ''}" :class="{active: saleOrder === 1 && filterIndex === 1}" class="yticon icon-shang"></text>
						<text :style="{color: saleOrder === 2 && filterIndex === 1 ? '#fa436a' : ''}" :class="{active: saleOrder === 2 && filterIndex === 1}" class="yticon icon-shang xia"></text>
					</view>
				</view>
				<view :style="{color: filterIndex === 3 ? '#fa436a' : ''}" class="nav-item" :class="{current: filterIndex === 3}" @click="tabClick(3)">
					<text>上架时间</text>
					<view class="p-box">
						<text :style="{color: timeOrder === 1 && filterIndex === 3 ? '#fa436a' : ''}" :class="{active: timeOrder === 1 && filterIndex === 3}" class="yticon icon-shang"></text>
						<text :style="{color: timeOrder === 2 && filterIndex === 3 ? '#fa436a' : ''}" :class="{active: timeOrder === 2 && filterIndex === 3}" class="yticon icon-shang xia"></text>
					</view>
				</view>
			</view> -->
		</view>
		
		<view class="place-view" ></view>
		
		<!-- 右边的scrollView开始 -->
		<scroll-view scroll-with-animation scroll-y class="right-view">
			<view class="right-item"  v-for="(item,index) in goodsList" :key="index" @click="clickStore(item)" >
				<view>
					<image :src="item.store_log" ></image>
				</view>
				<view class="right-detail" >
					<view class="name" >{{item.store_name}}</view>
					<view class="text1" >联系电话:<text>{{item.store_principal_phone}}</text></view>
					<view class="text1" >地址:<text>{{item.address}}</text></view>
					
					<view class="text2" v-if="item.subsidy_point > 0" >
						<text v-if="item.subsidy_type == 'per'">补贴{{item.subsidy_point}}个点</text>
						<text v-else>补贴{{item.subsidy_point}}元</text>
					</view>
					
					<view class="detail" >
						<view class="title" v-if="item.subsidy_point > 0" >实体商家</view>
						<view class="title-ad" v-if="item.subsidy_point <= 0" >广告</view>
						<view class="detail-btn" @click.stop="navToMap(item)">导航去商家</view>
					</view>
				</view>
			</view>
			
			<!-- 占位用的 -->
			
		</scroll-view>
		<!-- 右边的scrollView结束 -->
		
	</view>
</template>

<script>
	export default{
		
		data(){
			return{
				searchKws: '',
				filterIndex: 0,
				saleOrder: 0,
				timeOrder: 0,
				order: 1,
				loadingType: 'more',
				goodsList: [],   //店铺列表数据
				page: 1          //页面
				
			}
		},
		onLoad(option) {
			if(option.search){
				this.searchKws = option.search;
			}
			// console.log('返回当前',this.$store)
			this.loadData()
			
			// uni.getLocation({
			// 	success: res => {
			// 		console.log('location success', res)
			// 		uni.openLocation({
			// 			latitude: res.latitude,
			// 			longitude: res.longitude,
			// 			scale: 18
			// 		})
			// 	}
			// })
			
			// uni.chooseLocation({
			//     success: function (res) {
			// 		console.log('res',res)
			//         console.log('位置名称：' + res.name);
			//         console.log('详细地址：' + res.address);
			//         console.log('纬度：' + res.latitude);
			//         console.log('经度：' + res.longitude);
			//     }
			// });
		},
		watch:{
			// searchKws(newVal){
			// 	this.searchKws = newVal
				
			// }
		},
		methods:{
			navToMap(item){
				uni.openLocation({
				    latitude: Number(item.lat),
				    longitude:  Number(item.long),
					name:item.store_name,
					address:item.address,
				    success: function () {
				        console.log('success');
				    },
					fail:function(res){
						console.log('res',res)
					}
				});
			},
			//加载商品 ，带下拉刷新和上滑加载
			loadData(type='add', loading) {
				
				//没有更多直接返回
				if(type === 'add'){
					if(this.loadingType === 'nomore'){
						return;
					}
					this.loadingType = 'loading';
				}else{
					this.loadingType = 'more'
				}
				if(type === 'refresh'){
					this.page = 1;
				}
				// ,this.paginate,this.order,this.search
				
				this.$https.Classification.storeList(this.page,this.searchKws).then(res=>{
					console.log('请求到数据了',res,this.page)
					if(type === 'refresh'){
						this.goodsList = [];
					}
					this.goodsList = this.goodsList.concat(res.data);
					this.page++;
					//判断是否还有下一页，有是more  没有是nomore
					this.loadingType = this.page > res.last_page ? 'nomore' : 'more';
					if(type === 'refresh'){
						if(loading == 1){
							uni.hideLoading()
						}else{
							uni.stopPullDownRefresh();
						}
					}
				})
			},
			tabClick(index){
				if(this.filterIndex === index && index == 0 ){
					return;
				}
				this.filterIndex = index;
				if(index === 0){
					this.order = 1;
				}else if(index === 1){
					this.saleOrder = this.saleOrder === 2 ? 1: 2;
					if(this.saleOrder === 1){
						this.order = 7;
					}else if(this.saleOrder === 2){
						this.order = 6;
					}
				}else if(index === 3){
					this.timeOrder = this.timeOrder === 2 ? 1: 2;
					if(this.timeOrder === 1){
						this.order = 3;
					}else if(this.timeOrder === 2){
						this.order = 2;
					}
				}
				// uni.pageScrollTo({
				// 	duration: 300,
				// 	scrollTop: 0
				// })
				// this.loadData('refresh', 1);
				// uni.showLoading({
				// 	title: '正在加载'
				// })
			},
			change(e){  //当用户点击搜索按钮时
				this.searchKws = e
				this.loadData('refresh',1)
			},
			
			custom(e){   //当点击取消按钮时
				uni.navigateBack()
			},
			clickStore(item){
				uni.navigateTo({
					url: '../Store/storeGoods?data='+JSON.stringify(item)
				})
			}
			
		}
	}
</script>

<style lang="scss" scoped >
	
	page,.body{
		width: 100%;
		height: 100%;
		
		background-color: rgb(250,250,250);
	}
	
	.header{
		
		position: fixed;
		left: 0;
		// top: calc( 0 + var(--status-bar-height) );
		top: 0;
		
		z-index: 1;
		
		padding: 20rpx 0 14rpx 0;
	
		width: 100%;
		
		background-color: #FFFFFF;
		
		box-shadow: 0 2upx 10upx rgba(0,0,0,.06);
		
		.search{
			padding: 20rpx;
		}
	}
	
	.navbar{
	
		display: flex;
		width: 100%;
		background: #fff;
		height: 80upx;
		z-index: 10;
		.nav-item{
			flex: 1;
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100%;
			font-size: 30upx;
			color: #303133;
			position: relative;
			&.current{
				color: #fa436a;
				// &:after{
				// 	content: '';
				// 	position: absolute;
				// 	left: 50%;
				// 	bottom: 0;
				// 	transform: translateX(-50%);
				// 	width: 120upx;
				// 	height: 0;
				// 	border-bottom: 4upx solid #fa436a;
				// }
			}
			.navItemBefore{
				content: '';
				position: absolute;
				left: 50%;
				bottom: 0;
				transform: translateX(-50%);
				width: 120upx;
				height: 0;
				border-bottom: 4upx solid #fa436a;
			}
		}
		.p-box{
			display: flex;
			flex-direction: column;
			.yticon{
				display: flex;
				align-items: center;
				justify-content: center;
				width: 30upx;
				height: 14upx;
				line-height: 1;
				margin-left: 4upx;
				font-size: 26upx;
				color: #888;
				&.active{
					color: #fa436a;
				}
			}
			.xia{
				transform: scaleY(-1);
			}
		}
		.cate-item{
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100%;
			width: 80upx;
			position: relative;
			font-size: 44upx;
			&:after{
				content: '';
				position: absolute;
				left: 0;
				top: 50%;
				transform: translateY(-50%);
				border-left: 1px solid #ddd;
				width: 0;
				height: 36upx;
			}
		}
	}
	
	.place-view{
		height: calc( 140rpx );
		
	}
	
	.content{
		margin-top: 10rpx;
		
		width: 100%;
		background-color: #FFFFFF;
	}
	
	
	.right-view{
		
		width: 100%;
		height: calc(100vh - 200rpx);
		background-color: rgb(250,250,250);
		
		.right-item{
			
			display: flex;
			align-items: center;
			
			margin: 16rpx 0 16rpx 0;
			padding: 16rpx 10rpx 0 10rpx;
			
			font-size: $uni-font-size-base;
			
			width: 100%;
			
			background-color: #FFFFFF;
			
			&:first-child{
				margin-top: 0;
			}
			
			.right-detail{
				flex: 1;
				margin-right: 20rpx;
			}
			
			image{
				
				border-radius: 10rpx;
				
				width: 260rpx;
				height: 260rpx;
			}
			
			view{
				margin: 0 0 8rpx 10rpx;
				
				text-align: left;
			}
			
			.text1{
				color: #666;
			}
			
			.text2{
				
				margin-top: 20rpx;
				
				font-size: $uni-font-size-base;
				color: $uni-color-error;
			}
			
			.title{
				color: $uni-color-error;
			}
			
			.title-ad{
				color: rgb(0,29,245);
			}
			
			.detail{
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: space-between;
				
				margin-left: 0;
				
				.detail-btn{
					
					padding: 8rpx 10rpx;
					
					font-size: $uni-font-size-base;
					color: #FFFFFF;
					background-color: $uni-color-error;
				}
			}
		}
	}
	
</style>
